<template>
    <div class="home">
        <div class="left">
            <div>
                <xiaoshouxiangqing></xiaoshouxiangqing>
            </div>
            <div>
                <nongzicaigou></nongzicaigou>
            </div>
        </div>
        <div class="center"></div>
        <div class="right">
            <div>
                <div>
                    <fengxianxiaoshougaikuang></fengxianxiaoshougaikuang>
                </div>
                <div>
                    <shangpinfenleibiaoqianshengqingliang></shangpinfenleibiaoqianshengqingliang>
                </div>
            </div>
            <div>
                <div>
                    <shenqingmazongshu></shenqingmazongshu>
                </div>
                <div>
                    <suyuanpicizhanshi></suyuanpicizhanshi>
                </div>
            </div>
            <div>
                <jianguanjilu></jianguanjilu>
            </div>
        </div>
    </div>
</template>

<script>

    import xiaoshouxiangqing from "./xiaoshouxiangqing"
    import nongzicaigou from "./nongzicaigou"
    import fengxianxiaoshougaikuang from "./fengxianxiaoshougaikuang"
    import shangpinfenleibiaoqianshengqingliang from "./shangpinfenleibiaoqianshengqingliang"
    import shenqingmazongshu from "./shenqingmazongshu"
    import suyuanpicizhanshi from "./suyuanpicizhanshi"
    import jianguanjilu from "./jianguanjilu"

    export default {
        name: "Home",
        components: {
            xiaoshouxiangqing,
            nongzicaigou,
            fengxianxiaoshougaikuang,
            shangpinfenleibiaoqianshengqingliang,
            shenqingmazongshu,
            suyuanpicizhanshi,
            jianguanjilu
        },
        data() {
            return {}
        }
    };
</script>
<style lang="scss" scoped>
    .home {
        height: 100%;
        width: 100%;
        padding: 40px;
        display: flex;

        .left {
            width: 32%;
            display: flex;
            > div {
                flex: 1;
                margin-left: 40px;
            }
        }
        .center {
            width: 22%;
            margin: 0 40px;
        }

        .right {
            flex: 1;

            display: flex;
            > div {

                &:nth-last-child(n+2) {
                    width: 30%;

                    display: flex;
                    flex-direction: column;
                    > div {
                        /*background: #00D3F8;*/
                        &:first-child {
                            height: 52%;

                        }
                        &:last-child {
                            flex: 1;
                            margin-top: 40px;
                        }
                    }

                }
                &:nth-of-type(2) {
                    margin: 0 40px;
                }
                &:last-child {
                }
                width: 40%;
            }
        }

    }

</style>
